<template>
  <div id="threeSelectCharts" class="clearFix bgc-fff card-shadow"
       style=" flex: 1;
  margin: 0 0 0 0;
  width: 800px;
  height: 500px;">
    <div class="clearFix">
      <canvas></canvas>
    </div>
  </div>
</template>

<script>
  import Echarts from 'echarts'
  import * as Utils from '@/utils/index'
  export default {
    name: '',
    props: [],
    components: { },
    data() {
      return {
        chartsData: []
      }
    },
    mounted() {
      // this.getList()
    },
    methods: {
      initCharts(data) {
        console.log('threeSelectCharts-initCharts', data)
        const that = this
        if (data && data.length > 0) {
          that.chartsData = data
        }
        const oneSumList = []
        that.chartsData.map((item) => {
          oneSumList.push(item.vehicleSpeed)
        })
        let max1 = 10
        if (oneSumList && oneSumList.length > 1) {
          max1 = oneSumList.reduce(function(a, b) {
            return b > a ? b : a
          })
        } else if (oneSumList.length === 1) {
          max1 = oneSumList[0].vehicleSpeed
        }
        const maxList = [max1]
        let zMax = 0
        maxList.forEach((item) => {
          zMax += item
        })
        // console.log('maxList', maxList, 'max', zMax)
        const { digit, unitName, divideSum } = Utils.checkSumRightUnit(zMax)
        console.log('解析出的', 'digit', digit, 'unitName', unitName, 'divideSum', divideSum)
        const mDigit = (digit && digit > 10) ? digit : 10 // 最小 10 单位
        const upMax = (mDigit * (parseInt(zMax / mDigit) + 1)) / divideSum
        // console.log('mDigit', mDigit, 'upMax', upMax)
        const myChart = Echarts.init(document.getElementById('threeSelectCharts'))
        const option = {
          backgroundColor: '#f7f7f7',
          color: ['#5379B4', '#3d85c6', '#93BDDA', '#C84B51'],
          title: {
            // text: '业务主体运营关键数据趋势',
            left: 'left',
            top: '0',
            textStyle: {
              fontSize: '12',
              color: '#000'
            }
          },
          grid: {
            left: '70px',
            right: '50px',
            bottom: '100px'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['最高速度']
          },
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }, {
            start: 0,
            end: 100,
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          }],
          xAxis: [
            {
              type: 'time',
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '' + unitName + 'km/小时',
              min: 0,
              max: upMax,
              interval: Math.ceil(upMax / 10),
              axisLabel: {
                formatter: '{value} '
              },
              axisLine: {
                lineStyle: {
                  color: '#000000'
                }
              }
            }
            // {
            //   type: 'value',
            //   name: '电量/百分比',
            //   min: 0,
            //   max: 100,
            //   interval: 20,
            //   axisLabel: {
            //     formatter: '{value} %'
            //   },
            //   axisLine: {
            //     lineStyle: {
            //       color: '#000000'
            //     }
            //   }
            // }
          ],
          series: [
            {
              name: '最高速度',
              type: 'line',
              label: { show: true, position: 'top', formatter: '' },
              data: that.chartsData.map(function(item) {
                return [new Date(item.gmtCreate).getTime(), item.vehicleSpeed]
              })
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
